/* SPDX-License-Identifier: Apache-2.0 */

/*
  The  main header of a package detail page. Contains key package information
  including name, description, license, etc.

  This block assumes it is placed inside a dark container.

  <div class="package-header">
    <div class="package-header__left">
      <h1 class="package-header__name"></h1>
      <p class="package-header__pip-instructions">
        <span>// pip instructions</span>
        <button><i></i></button> // copy icon
      </p>
    </div>
    <div class="package-header__right">
      // status badge here
      <p class="package-header__date"></p>
    </div>
  </div>
*/

.package-header {
  @include site-container;
  display: flex;
  direction: ltr;
  text-align: left;

  button {
    color: $white;
  }

  &__left {
    width: 75%;
    padding-right: $spacing-unit;
  }

  &__right {
    text-align: right;
    width: 25%;
  }

  @media screen and (max-width: $tablet) {
    display: block;

    &__left,
    &__right {
      width: 100%;
      padding-right: 0;
      text-align: left;
    }

    &__right {
      margin-top: $half-spacing-unit;
    }
  }

  &__name {
    padding: 0;
    margin-top: -10px;
  }

  &__pip-instructions {
    @include clearfix;
    margin: 10px 0 0;
    padding-bottom: 0;

    span {
      font-family: $code-font;
      font-weight: 500;
      font-size: 1.2rem;
      float: left;
      background-color: transparentize($black, 0.85);
      padding: 8px;
      border: 1px dotted $transparent-white;
      line-height: $spacing-unit;

      @media only screen and (max-width: $tablet) {
        font-size: 1.1rem;
      }

      @media only screen and (max-width: $mobile) {
        font-size: 1rem;
      }
    }

    button {
      color: $white;
      line-height: $spacing-unit;
      float: left;
      cursor: pointer;
      padding: 8px $half-spacing-unit;
      background-color: transparentize($black, 0.85);
      border-right: 1px dotted $transparent-white;
      border-top: 1px dotted $transparent-white;
      border-bottom: 1px dotted $transparent-white;
      border-left: 1px;

      &:hover {
        background-color: transparentize($black, 0.8);
      }

      @include link-focus-state($white);
    }
  }

  &__date {
    margin-top: 20px;
    padding-bottom: 5px;

    @media screen and (max-width: $tablet) {
      margin-top: $half-spacing-unit;
      padding-bottom: 0;
    }
  }
}
